<template>
  <ContributePreview v-if="uploadSuccess" :videoUrl="uploadedVideoUrl"></ContributePreview>

  <div v-else class="upload-video" >
    <div class="upload-wrapper">
      <el-upload
        class="upload-area"
        drag
        v-loading="isUploadingVideo"
        :auto-upload="true"
        :show-file-list="false"
        :on-change="handleFileChange"
        :http-request="uploadVideo"
      >
        <div class="upload-content">
          <i class="upload-icon iconfont icon-upload"></i>
          <div class="upload-text">
            <h3>点击上传或将视频拖入此区域</h3>
            <p>支持 MP4、FLV、AVI 等主流格式</p>
          </div>
          <div class="upload-tip">
            <p>建议上传 720P/1080P 的视频</p>
            <p>支持单个视频最大 4GB</p>
          </div>
        </div>
      </el-upload>

      <div class="fast-entry">
        <div class="entry-item">
          <i class="iconfont icon-draft"></i>
          <span>草稿箱</span>
          <span class="count">{{ draftCount }}</span>
        </div>
        <div class="entry-item">
          <i class="iconfont icon-manage"></i>
          <span>创作首页</span>
        </div>
      </div>
    </div>

    <!-- 审核队列提示 -->
    <div class="review-tip">
      <span>当前审核队列：快速</span>
      <el-tooltip content="预计15分钟内完成审核" placement="top">
        <i class="iconfont icon-question"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import apiClient from "@/api/axios.js";
// import {UploadApi} from "@/api/uploadApi.js";
import ContributePreview from "@/pages/PlatForm/views/UploadView/Components/ContributePreview.vue";

const draftCount = ref(0)
const uploadSuccess = ref(false)
const uploadedVideoUrl = ref(null); //视频url, 用于跳转至投稿详情页面
const isUploadingVideo = ref(false);

const handleFileChange = (file) => {
  isUploadingVideo.value = true;
  // 文件大小限制（4GB）
  const maxSize = 4 * 1024 * 1024 * 1024
  if (file.size > maxSize) {
    ElMessage.error('文件大小不能超过4GB')
    return
  }

  // 文件类型限制
  const allowTypes = ['video/mp4', 'video/flv', 'video/avi']
  if (!allowTypes.includes(file.raw.type)) {
    console.log('不支持的文件格式', file.raw);
    ElMessage.error('不支持的文件格式')
    return
  }
}

const uploadVideo = ({ file, headers, data, onProgress, onSuccess, onError }) => {
  // UploadApi.uploadVedio(file)
  //   .then(response => {
  //     onSuccess(response.data);
  //     ElMessage.success(' 视频上传成功');
  //     uploadedVideoUrl.value = response.data;
  //     console.log(uploadedVideoUrl.value)
  //     uploadSuccess.value = true;
  //   })
  //   .catch(error => {
  //     onError(error);
  //     console.error('上传失败:', error)
  //     ElMessage.error(' 视频上传失败')
  //   });
}
</script>

<style scoped lang="less">
.upload-video {
  padding: 20px;

  .upload-wrapper {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);

    .upload-area {
      :deep(.el-upload-dragger) {
        width: 100%;
        height: 360px;
        border: 2px dashed #e3e5e7;
        border-radius: 12px;
        background: #f6f7f8;

        &:hover {
          border-color: #00a1d6;
          background: #f6f7f8;
        }
      }

      .upload-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #61666d;

        .upload-icon {
          font-size: 48px;
          color: #9499a0;
          margin-bottom: 20px;
        }

        .upload-text {
          text-align: center;
          margin-bottom: 20px;

          h3 {
            font-size: 18px;
            color: #18191c;
            margin-bottom: 8px;
            font-weight: 500;
          }

          p {
            font-size: 14px;
            color: #61666d;
          }
        }

        .upload-tip {
          text-align: center;
          font-size: 12px;
          color: #9499a0;

          p {
            line-height: 1.8;
          }
        }
      }
    }

    .fast-entry {
      display: flex;
      justify-content: center;
      margin-top: 24px;

      .entry-item {
        display: flex;
        align-items: center;
        padding: 0 20px;
        cursor: pointer;
        color: #61666d;

        &:hover {
          color: #00a1d6;
        }

        .iconfont {
          font-size: 16px;
          margin-right: 4px;
        }

        .count {
          margin-left: 4px;
          color: #9499a0;
        }

        & + .entry-item {
          border-left: 1px solid #e3e5e7;
        }
      }
    }
  }

  .review-tip {
    margin-top: 16px;
    text-align: center;
    color: #61666d;
    font-size: 14px;

    .iconfont {
      margin-left: 4px;
      color: #9499a0;
      cursor: pointer;

      &:hover {
        color: #00a1d6;
      }
    }
  }
}
</style>
